*{margin: 0; padding: 0;}

body{font: 12px Tahoma, Arial;}

#wrapper{margin: 10px 5%;}

#header{height: 100px; border-bottom: solid 2px silver; margin-bottom: 10px;}
#body{}
#footer{height: 100px; border-top: solid 2px silver; margin-top: 10px;}

#toolbar{}

#stage{height: 450px; border: solid 1px silver; background-color: #eee; overflow: auto;}

#playerInfo{}
#playerInfo .name{line-height: 20px;}
#playerInfo .name .value{font-weight: bold;}
#playerInfo .levelup{background-color: yellow; display: none;}

.statusbar{border: solid 1px black; height: 5px; background-color: #eee; margin-bottom: 2px;}
.statusbar div{height: 100%; background-color: gray;}
.statusbar.health{}
.statusbar.health div{background-color: green;}
.statusbar.exp{}
.statusbar.exp div{background-color: orange;}

#panels{display: none;}
.panel{height: 100%; background-color: #f5f5f5;}

#panel_area{padding: 5px;}

#panel_location{}
#locationName{font-weight: bold; font-size: 1.2em; text-align: center;}
#locationDescription{}
#locationStage{float: left;}
#locationActions{float: right; width: 250px; border-left: solid 1px silver; padding: 0 5px;}
.actionsGroup{margin-bottom: 1em;}
.actionsGroup h4{font-weight: bold;}
.actionsGroup ul{list-style: none;}
#locationBattleActions{display: none;}
#locationBattleActions .sameAgainLink{display: none;}
#locationMonsters{display: none;}

.location{float: left; width: 40px; height: 40px; border: solid 1px silver; margin: 0 2px 2px 0;}
.location.first{clear: left;}
.location.field{}
.location.forest{border-color: green; background-color: #efe;}
.location.dense-forest{border-color: green; background-color: #cfc;}
.location.fountain{border-color: #09f; background-color: #f0faff;}
.location.sage{border-color: #7E42D2; background-color: #DDCCF6;}
.location.active{border-color: gray; cursor: pointer;}
.location.current{border-color: black;}
.location.active:hover{border-color: black; background-color: white;}

/* Character page */
#characterStats{}
#characterStats dl{width: 250px; float: left;}
#characterStats dl dt{float: left; width: 40%;}
#characterStats dl dd{width: 100%; clear: right;}
#characterStats dl dd .buff{color: green;}
#characterStats dl dd .debuff{color: red;}

/* Dialog */
#panel_dialog{padding: 0 5px;}
#dialogText{}
#dialogActions{margin-top: 10px;}
#dialogActions ul{margin-left: 2em;}
#dialogActions li{margin-bottom: 5px;}
#dialogActions li a{}
#dialogActions li a:hover{}

/* Other */
.bigger{font-size: 1.2em;}
.smaller{font-size: .8em;}
.clr{clear: both;}